<template>
  <div v-show="visible"
       class="drawer"
  >
    <div
            class="fold-icon-wrapper base-btn arrowr"
            :style="retractStyle"
            @click="closeDraw"
    >
    </div>
    <div style="overflow: hidden;height: 100%">
      <div class="tit">图钉<span class="closeIcon" @click="closeDraw">X</span></div>
      <!--    :load-data="onLoadData"-->
      <a-tree
              v-model="checkedKeys"
              checkable
              :tree-data="treeDataNew"
              :replaceFields="{key: 'id',title: 'nodeName', children:'children'}"
              @check="onCheck"
              @select="onSelect"
              style="width: 450px;"
      >
        <div slot="title" slot-scope="{nodeName}" style="width: 330px" class="ellipsis">
          <a-tooltip>
            <template #title>{{nodeName}}</template>
            {{nodeName}}
          </a-tooltip>
        </div>
      </a-tree>
    </div>
  </div>
</template>

<script>
  import {Collapse} from 'ant-design-vue'
  import { getBimThumbtackActualBuAreaId } from '@/api/bimIntegrate/bimModel'
  export default {
    name: 'Thumbtack',
    components: {
      [Collapse.name]: Collapse,
      [Collapse.Panel.name]:Collapse.Panel
    },
    props:{
      drawVisible: {
        type: Boolean,
        default: false
      },
      setThumb: {
        type: Function,
        default: ()=>{}
      },
      treeData: {
        type: Array,
        default() {
          return []
        }
      } // 图钉相关数据
    },
    data() {
      return {
        retractStyle: {
          cursor: 'pointer',
          background: `url("") center center no-repeat`
        },
        checkedKeys: []
      }
    },
    computed: {
      visible() {
        return this.drawVisible
      },
      treeDataNew: {
        get() {
          return this.treeData
        },
        set(val) {
          console.log(val,'val')
        }

      }
    },
    methods: {
      closeDraw() {
        this.$emit('update:drawVisible', false)
      },
      onCheck() {
        this.setThumb(this.treeData)
      },
      onLoadData(treeNode) {
        return new Promise((resolve)=>{
          if (!treeNode.dataRef.isNeedLoad) {
            resolve();
            return;
          }
          if(treeNode.dataRef.isNeedLoad) {
            getBimThumbtackActualBuAreaId({
              areaId: treeNode.dataRef.subAreaId
            }).then(res=>{
              treeNode.dataRef.isNeedLoad = false
              res.data.forEach((item, i)=>{
                item.id = item.nodeName + i
              })
              treeNode.dataRef.children =  res.data
              this.treeDataNew = [...this.treeDataNew];
              resolve();
            })
          }

        })
      },
      onSelect(selectedKeys, { node}) {
        this.$emit('select', node.dataRef)
      },
    }
  }
</script>

<style scoped lang="less">
  h3{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    .square {
      height: 15px;
      width: 15px;
      background-color: rgba(253, 136, 0, 1);
      margin-right: 5px;
    }
    .squareb {
      background-color: rgba(88, 204, 0, 1);
    }
  }
  .drawer {
    height: 100%;
    width: 450px;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #ccc;
    z-index: 99;
    background-color: #fff;
    /*overflow-: auto;*/
    .tit {
      height: 50px;
      font-size: 16px;
      padding:0 10px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .closeIcon {
      cursor: pointer;
    }
  }
  ::v-deep .ant-drawer-body {
    padding: 0;
  }
  ::v-deep .ant-collapse-item {
    background-color: #fff;
  }
 ::v-deep .ant-collapse-item-active > .ant-collapse-header {
   border-bottom: 1px solid #d9d9d9;
 }
  ::v-deep .ant-collapse-content-box {
    padding: 16px 0;
  }
  .arrowr {
    position: absolute;
    left: -10px;
    width: 10px;
    height: 58px;
    top: 30%;
    z-index: 9;
    cursor: pointer;
    transform: rotate(-180deg);
  }
  .ellipsis {
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
</style>